<!DOCTYPE html>

<html>
    <head>
        <meta charset = "utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        
        <title>index</title>

        <link rel="stylesheet" href="css/style.css">
        <link rel="shortcut icon" href="img/logo.png">
    </head>

    <div class="gallery-page">
        <header class="header">
        	<div class="nav-wrapper">
        		<div class="logo-wrapper">
        		    <a href="index.html">
        		        <img class="logo" alt="logo" src="img/logo.png">
        		    </a>
        		</div>

        		<nav class="nav">
        		    <ul>
        		    	<li> <a href="index.html">首页</a> </li>
        		    	<li> <a href="blog.html">文章</a> </li>
        		    	<li> <a href="gallery.html">作品</a> </li>
        		    	<li> <a href="about.html">关于</a> </li>
        		    </ul>
        		</nav>
        	</div>

        	
        	<a class="link-github" href="https://github.com">
        	    <img alt="link to github" src="img/icon-github.png">
        	</a>
        </header>

        <div class="body clearfix">
            <div class="gallery float-left">
                <header>
                    <nav class="gallery-tab">
                        <ul clas="clear-fix">
                            <li class="gallery-tab-item float-left">
                                <a class="link all active" href="#">ALL</a>
                            </li>

                            <li class="gallery-tab-item float-left">
                                <a class="link javascript" href="#">JavaScript Util Functions</a>
                            </li>

                            <li class="gallery-tab-item float-left">
                                <a class="link ui" href="#">UI Components</a>
                            </li>

                            <li class="gallery-tab-item float-left">
                                <a class="link framework" href="#">Framework</a>
                            </li>

                            <li class="gallery-tab-item float-left">
                                <a class="link applications" href="#">Applications</a>
                            </li>
                        </ul>
                    </nav>
                </header>

                <div class="gallery-content">
                    <div class="col-2">
                        <div class="col-4">
                            <div class="work javascript">
                                <img class="img" src="img/gallery.jpg">

                                <div class="description-wrapper">
                                    <i class="icon">J</i>

                                    <div class="description">
                                        <h1 class="title">这里是标题</h1>
                                        <p class="content">这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-4">
                            <div class="col-2">
                                <div class="work applications">
                                    <img class="img" src="img/gallery.jpg">

                                    <div class="description-wrapper">
                                        <div class="category">
                                            <i class="icon">A</i>
                                        </div>

                                        <div class="description">
                                            <h1 class="title">这里是标题</h1>
                                            <p class="content">这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="work javascript">
                                    <img class="img" src="img/gallery.jpg">

                                    <div class="description-wrapper">
                                        <div class="category">
                                            <i class="icon">J</i>
                                        </div>

                                        <div class="description">
                                            <h1 class="title">这里是标题</h1>
                                            <p class="content">这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-2">
                                <div class="work framework">
                                    <img class="img" src="img/gallery.jpg">

                                    <div class="description-wrapper">
                                        <div class="category">
                                            <i class="icon">J</i>
                                        </div>

                                        <div class="description">
                                            <h1 class="title">这里是标题</h1>
                                            <p class="content">这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="work ui">
                                    <img class="img" src="img/gallery.jpg">

                                    <div class="description-wrapper">
                                        <div class="category">
                                            <i class="icon">J</i>
                                        </div>

                                        <div class="description">
                                            <h1 class="title">这里是标题</h1>
                                            <p class="content">这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-1">
                        <div class="work ui">
                            <img class="img" src="img/gallery.jpg">

                            <div class="description-wrapper">
                                <div class="category">
                                    <i class="icon">J</i>
                                </div>

                                <div class="description">
                                    <h1 class="title">这里是标题</h1>
                                    <p class="content">这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
                                </div>
                            </div>
                        </div>

                        <div class="work javascript">
                            <img class="img" src="img/gallery.jpg">

                            <div class="description-wrapper">
                                <div class="category">
                                    <i class="icon">J</i>
                                </div>

                                <div class="description">
                                    <h1 class="title">这里是标题</h1>
                                    <p class="content">这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
                                </div>
                            </div>
                        </div>

                        <div class="work applications">
                            <img class="img" src="img/gallery.jpg">

                            <div class="description-wrapper">
                                <div class="category">
                                    <i class="icon">J</i>
                                </div>

                                <div class="description">
                                    <h1 class="title">这里是标题</h1>
                                    <p class="content">这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-1">
                        <div class="work applications">
                            <img class="img" src="img/gallery.jpg">

                            <div class="description-wrapper">
                                <div class="category">
                                    <i class="icon">J</i>
                                </div>

                                <div class="description">
                                    <h1 class="title">这里是标题</h1>
                                    <p class="content">这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
                                </div>
                            </div>
                        </div>

                        <div class="work framework">
                            <img class="img" src="img/gallery.jpg">

                            <div class="description-wrapper">
                                <div class="category">
                                    <i class="icon">J</i>
                                </div>

                                <div class="description">
                                    <h1 class="title">这里是标题</h1>
                                    <p class="content">这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <button class="more">点击查看更多</button>
            </div>

            <aside class="aside float-left">
                <div class="search-form clearfix">
                    <input class="search-input float-left" type="text">
                    <input class="submit-input float-left" type="submit" value="GO">
                </div>

                <div class="rank-list">
                    <h1 class="title">人气排行榜</h1> 
                    <ol>
                        <li class="rank">
                            <div class="clearfix">
                                <span class="rank-number float-left">1</span>
                                 <div class="rank-bar float-left">
                                    <span class="progress"></span>
                                </div>
                                <span class="name float-left">ui.tree</span>
                            </div>
                        </li>

                        <li class="rank">
                            <div class="clearfix">
                                <span class="rank-number float-left">1</span>
                                 <div class="rank-bar float-left">
                                    <span class="progress"></span>
                                </div>
                                <span class="name float-left">ui.tree</span>
                            </div>
                        </li>

                        <li class="rank">
                            <div class="clearfix">
                                <span class="rank-number float-left">1</span>
                                 <div class="rank-bar float-left">
                                    <span class="progress"></span>
                                </div>
                                <span class="name float-left">ui.tree</span>
                            </div>
                        </li>

                        <li class="rank">
                            <div class="clearfix">
                                <span class="rank-number float-left">1</span>
                                 <div class="rank-bar float-left">
                                    <span class="progress"></span>
                                </div>
                                <span class="name float-left">ui.tree</span>
                            </div>
                        </li>

                        <li class="rank">
                            <div class="clearfix">
                                <span class="rank-number float-left">1</span>
                                 <div class="rank-bar float-left">
                                    <span class="progress"></span>
                                </div>
                                <span class="name float-left">ui.tree</span>
                            </div>
                        </li>
                    </ol>
                </div>
            </aside>
        </div>

        <footer class="footer">
            <nav class="footer-nav">
                <ul>
                    <li> <a href="index.html">首页</a> </li>
                    <li> <a href="blog.html">文章</a> </li>
                    <li> <a href="gallery.html">作品</a> </li>
                    <li> <a href="about.html">关于</a> </li> 
                </ul>
            </nav>

            <div class="other-links">
                <dl class="link-category">
                    <dt class="link-name">学习资料</dt>
                    <dd class="links">
                        <ul>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">Hover时样式</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                        </ul>
                    </dd>
                </dl>

                <dl class="link-category">
                    <dt class="link-name">友情链接</dt>
                    <dd class="links">
                        <ul>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">Hover时样式</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                    </dd>
                </dl>

                <dl class="link-category">
                    <dt class="link-name">学习资料</dt>
                    <dd class="links">
                        <ul>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">Hover时样式</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                        </ul>
                    </dd>
                </dl>

                <dl class="link-category">
                    <dt class="link-name">学习资料</dt>
                    <dd class="links">
                        <ul>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">Hover时样式</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                        </ul>
                    </dd>
                </dl>

                <dl class="link-category">
                    <dt class="link-name">友情链接</dt>
                    <dd class="links">
                        <ul>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">Hover时样式</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                        </ul>
                    </dd>
                </dl>
            </div>

            <div class="copy-right">
                <p class="description">版权信息</p>
                <a href="https://github.com">
                    <img alt="copy-right" src="img/icon-github.png">
                </a>
            </div>
       	</footer>
    </div>
</html>